/*
 * @Description: table表格一
 * @Author: ZhangHan
 * @Date: 2025-04-23 09:50:11
 * @LastEditTime: 2025-05-26 17:42:24
 * @LastEditors: ZhangHan
 */
import { useEffect, useState } from "react";
import { mockTableData } from "@/mock/table";
import columns from "./list";
import DetailModal from "./components/DetailModal.tsx";
import { Button } from "antd";
import { ProTable } from "@/components/ProComponents";
import { useModal } from "@/components/ProComponents/src/ProModal/useModal";
import { TableRowSelection } from "@/components/ProComponents/src/ProTable/prop";
import TableAction from "@/components/ProComponents/src/ProTable/components/TableAction";
import { excelExport } from "@/utils/testExport/exportUtils.ts";

function MyTableOne() {
  const { modalProps, openModal, closeModal } = useModal({
    footer: null,
    title: "这是详情",
  });
  const [tableData, setTableData] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    setTableData(mockTableData);
  }, []);

  //打开弹框
  const handleDetailModal = (record: any) => {
    console.log("🚀 ~ handleDetailModal ~ record:", record);
    openModal({
      modalData: record,
    });
  };

  //导出
  function exportExcel() {
    setLoading(true);
    const data = tableData;
    setLoading(false);
    excelExport({
      columns: columns,
      data: data,
      fileName: "测试导出22",
      exportColumnFormat: (key, value) => {
        if (key === "tags") {
          console.log(value?.tags.join("-"));

          return value?.tags.join("-");
        }
      },
    });
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<any> = {
    selectedRowKeys,
    onChange: onSelectChange,
    type: "checkbox",
  };

  const getbtnGroup = () => {
    return (
      <>
        <div className="w-full flex justify-start items-center ">
          <Button type="primary" onClick={exportExcel}>
            导出
          </Button>
        </div>
      </>
    );
  };

  const createAction = (text, record, index) => {
    const actionList = [
      {
        label: "详情",
        onClick: () => {
          console.log("点击详情", text, record, index);
          handleDetailModal(record);
        },
        tooltip: "点击打开详情",
      },
      {
        label: "删除",
        onClick: () => {
          console.log("点击删除");
        },
        danger: true,

        tooltip: "确认要删除吗",
      },
      {
        label: "修改",
        onClick: () => {
          console.log("点击修改");
        },
      },
    ];

    return <TableAction actionColumns={actionList} />;
  };

  return (
    <>
      <div className="w-full h-full">
        <ProTable
          myTitle="这是标题"
          footer="MyTableOne底部"
          bordered={true}
          dataSource={tableData}
          columns={columns}
          createAction={createAction}
          rowSelection={rowSelection}
          getbtnGroup={getbtnGroup}
        />
        <DetailModal modalProps={modalProps} onCancel={closeModal} />
      </div>
    </>
  );
}

export default MyTableOne;
